import React, { useState } from 'react'
import { Layout, theme } from 'antd'
import { Outlet } from 'react-router-dom'
import MainMenu from '@/components/MainMenu'
import MainBreadcrumb from '@/components/BreadCrumb'
const { Header, Content, Footer, Sider } = Layout

// const breadcrumbItems: breadcrumbItemsType[] = []
const View: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false)
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左侧侧边栏 */}
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical" />
        {/* 导航栏 */}
        <MainMenu />
      </Sider>
      {/* 内容 */}
      <Layout>
        {/* 右侧头部 */}
        <Header
          style={{ padding: 0, background: colorBgContainer, paddingLeft: 16 }}
        >
          {/* 面包屑 */}
          <MainBreadcrumb />
        </Header>
        {/* 右侧内容 */}
        <Content
          style={{
            margin: '16px 16px 0',
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet />
        </Content>
        {/* 右侧底部 */}
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  )
}

export default View
